<html>
    <head>
        <meta charset="UTF-8">
        <title>表格的动态添加和删除</title>
        <script type="text/javascript">
            function addNewLine(){
                //1、获取学生姓名
                var studentName = document.getElementById("studentName").value;
                //2、获取表格对象
                var tableObj =  document.getElementById("studentTable");
                //3、调用表格对象的相关方法完成添加新行
                var index = tableObj.rows.length;
                var tableRow = tableObj.insertRow(index);//表格的行数
                var time = new Date().getTime();//毫秒
                tableRow.id = time;
                //4、给tableRow添加两个单元格
                var tableCell0 = tableRow.insertCell(0);
                var tableCell1 = tableRow.insertCell(1);
                //5、给单元格设置html
                tableCell0.innerHTML = studentName;
                tableCell1.innerHTML = '<input type="button" value="删除" onclick="del('+time+');"/>';

            }
            function del(tableRowId){
                //alert(tableRowId);
                //通过tableRowId获取tableRow对象。
                var tableRow = document.getElementById(tableRowId);
                //获取表格对象
                var studentTable = document.getElementById("studentTable");
                //删除tableRow
                studentTable.deleteRow(tableRow.rowIndex);
            }
        
        
        </script>
    </head>
    <body>

        <input type="text" id="studentName"/>
        <input type="button" value="添加" onclick="addNewLine();"/>
        <hr>
        <table id="studentTable" border="2" width="30%">
            <tr>
                <th>学生姓名</th>
                <th>操作</th>
            </tr>
            <!-- <tr>
                <td>张三</td>
                <td>
                    <input type="button" value="删除" />
                </td>

            </tr> -->
        </table>


    </body>
</html>